<template>
	<view>
		<!-- <u-navbar :is-back="false" :is-fixed="true" title="需求"></u-navbar> -->

		<view class="fixed-top bg-white">
			<view class="px-3 tab-items" v-for="(item,index) in tabList" :id="'tab'+index" @click="changeTabList(index)"
				:key="index">
				<view class="font-md" :class="tabIndexList === index ? 'text-8ED0F2 font-weight-bold font-lg':''">
					{{item.name}}
				</view>
			</view>
			<view v-if="tabIndexList === 0 || tabIndexList === 1">
				<view class="px-2 mt-2 pb-2 dfes">
					<!-- <i v-if="tabIndexList === 1" class="iconfont icon-jia text-8ED0F2 mr-2"
						@click="open('tabbar/order/addOrder')"></i> -->
					<u-button v-if="tabIndexList === 1" class="mr-2 text-white bg-8ED0F2" size="mini" shape="circle"
						@click="open('tabbar/order/addOrder')">新增</u-button>
					<u-search placeholder="请输入关键字 " height="60" border-color="#8ED0F2" search-icon-color="#8ED0F2"
						bg-color="#fff" v-model="keyword" @input="search" :action-style="actionStyle"></u-search>
				</view>
				<scroll-view scroll-x class="tab-scroll" :scroll-into-view="scrollinto" :scroll-with-animation="true"
					:show-scrollbar="false">
					<view class="px-3  tab-item" v-for="(item,index) in (tabIndexList === 0 ? tabBar : tabBars)"
						:id="'tab'+index"
						@click="changeTab(tabIndexList === 0 ? index : index, item.orderState, item.approvalState)"
						:key="index">
						<view class="font-16 dfex"
							:class="(tabIndexList === 0 ? tabIndex : tabIndexs) === index ? 'text-8ED0F2 active':''">
							{{item.name}}
						</view>
					</view>
				</scroll-view>
			</view>
			<u-gap height="20" bg-color="#f7f7f7"></u-gap>
		</view>

		<view class=" bg-white mt-12">
			<view class="p-2" style="margin-top: 140px;">
				<swiper :current="tabIndexList === 0 ? tabIndex : tabIndexs"
					@change="onChangeTab(tabIndexList === 0 ? $event : $event, tabIndexList === 0 ? tabBar : tabBars)"
					style="height: 100vh;">
					<swiper-item v-for="(_,inx) in (tabIndexList === 0 ? tabBar : tabBars)" :key="inx">
						<scroll-view scroll-y style="height: calc(100vh - 0px);" :show-scrollbar="false"
							@scrolltolower="loadMore" @scrolltoupper="refresh">
							<view v-for="(item, index) in (tabIndexList === 0 ? newlist : agriculture)" :key="index"
								class="pb-2 mt-2 content-item">
								<view class="show-dd pl-2 bg-white pt-2">
									<view class="dfes">
										<view class="font-14 text-333333 font-weight-bold">
											{{item.title}}
										</view>
										<view v-if="tabIndexList === 0 " class="position-absolute text-FFC251 font-14"
											style="right: 10px;">
											{{item.orderState_dictText}}
										</view>
										<view v-else class="position-absolute text-FFC251 font-14" style="right: 10px;">
											{{item.approvalState_dictText}}
										</view>
									</view>
									<view class="lineHight mt-2">
										<view>
											{{ tabIndexList === 0 ? '订单编号' : '产品名称' }}：{{ tabIndexList === 0 ? item.orderNumber : item.productName }}
										</view>
										<view>
											{{ tabIndexList === 0 ? '涉农企业' : '价格' }}：{{ tabIndexList === 0 ? item.downEnterpriseName : item.price }}
										</view>
										<view>
											{{ tabIndexList === 0 ? '订单时间' : '截止时间' }}：{{ tabIndexList === 0 ? item.createTime : item.updateTime }}
										</view>
									</view>

									<view class="lineHight-3 text-right">
										<u-button
											v-if="tabIndexList === 0 && item.orderState_dictText === '对接中' || item.orderState_dictText === '待评价' || item.orderState_dictText === '已完成' || item.orderState_dictText === '已取消'"
											class="mr-1 borRound text-78AB06" :plain="false" :hair-line="false"
											size="mini" shape="circle"
											@click="open('tabbar/order/downstreamOrders',item.id)">查看订单</u-button>
										<u-button v-if="tabIndexList === 0 && item.orderState_dictText === '对接中'"
											class="mr-1 borRound text-78AB06" :plain="false" :hair-line="false"
											size="mini" shape="circle" @click="cancel(item)">取消订单</u-button>
										<u-button v-if="tabIndexList === 0 && item.orderState_dictText === '对接中'"
											class="mr-1 borRound text-78AB06" :plain="false" :hair-line="false"
											size="mini" shape="circle" @click="addTags(item.id)">进度填写</u-button>


										<u-button
											v-if="tabIndexList === 1 && item.approvalState_dictText === '待审批' || item.approvalState_dictText === '已同意' || item.approvalState_dictText === '已驳回'"
											class="mr-1 borRound text-78AB06" :plain="false" :hair-line="false"
											size="mini" shape="circle"
											@click="open('tabbar/order/check',item.id)">查看</u-button>
										<u-button v-if="tabIndexList === 1 &&  item.approvalState_dictText !== '待审批'"
											class="mr-1 borRound text-78AB06" :plain="false" :hair-line="false"
											size="mini" shape="circle"
											@click="open('tabbar/order/modifyOrder',item.id)">编辑</u-button>
										<u-button v-if="tabIndexList === 1 && item.approvalState_dictText !== '待审批'"
											class="mr-1 borRound text-78AB06" :plain="false" :hair-line="false"
											size="mini" shape="circle" @click="deleteMy(item)">删除</u-button>
									</view>
								</view>
							</view>
							<view v-if="!hasMore && (newlist.length > 0 || agriculture.length > 0)"
								class="text-center mt-3 mb-3">
								<view class="text-muted">没有更多数据了</view>
							</view>
							<view v-else-if="(newlist.length === 0 && agriculture.length === 0)"
								class="text-center mt-3 mb-3">
								<view class="icon-sousuo1 iconfont text-999999" style="font-size: 55px;"></view>
								<view class="text-999999 font-15">暂时木有内容呀~~</view>
							</view>
							<view v-else class="text-center mt-3 mb-3">
								<view class="btn btn-primary">加载更多</view>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<free-confirm ref="confirmShow" title="进度填写">
			<u-form :model="code">
				<u-form-item :label-style="labelStyle" label="进度填写" label-width="180" prop="labels">
					<u-input class="mr-3" placeholder="请输入" v-model="code.orderSchedule" input-align="right"
						type="textarea " />
				</u-form-item>
			</u-form>
		</free-confirm>
	</view>
</template>

<script>
	import $H from '@/common/free-lib/request.js';
	import freeConfirm from "@/components/free-ui/free-confirm.vue";
	export default {
		components: {
			freeConfirm,
		},
		data() {
			return {
				tabBar: [{
						"id": 1,
						"name": "全部",
						"orderState": null
					},
					{
						"id": 2,
						"name": "对接中",
						"orderState": "DOCKING"
					},
					{
						"id": 3,
						"name": "待评价",
						"orderState": "EVALUATE"
					},
					{
						"id": 4,
						"name": "已完成",
						"orderState": "COMPLETE"
					},
				],
				tabBars: [{
						"id": 1,
						"name": "全部",
						"approvalState": null
					},
					{
						"id": 2,
						"name": "待审批",
						"approvalState": "approval"
					},
					{
						"id": 3,
						"name": "已发布",
						"approvalState": "success"
					},
					{
						"id": 4,
						"name": "已驳回",
						"approvalState": "reject"
					},
				],
				scrollinto: "",
				tabIndex: 0,
				tabIndexs: 0,
				tabIndexList: 0,
				currentTab: 0,
				keyword: '',
				actionStyle: {
					color: '#8ED0F2'
				},
				tabList: [{
						"id": 1,
						"name": "需求订单",
					},
					{
						"id": 2,
						"name": "我的需求",
					},
				],
				newlist: [],
				agriculture: [],
				form: {
					pageNo: 1,
					pageSize: 10,
					total: 0 // 总页数
				},
				hasMore: true, // 是否还有更多数据
				orderState: '',
				approvalState: '',
				code: {
					id: '',
					orderSchedule: ''
				},
				labelStyle: {
					paddingLeft: '13px',
					width: '130px'
				},

			};
		},
		onLoad(options) {
			if (options.status) {
				this.tabIndexList = parseInt(options.status);
			}
			console.log(status, 'status')
			this.getList()
		},
		methods: {
			setDefaultPageConfig() {
				this.form.pageNo = 1
				this.form.pageSize = 10
				this.form.total = 0
			},
			search() {
				if (this.keyword.trim() === '') {
					this.hasMore = true;
					this.newlist = []; // 清空列表数据
					this.agriculture = [];
					this.setDefaultPageConfig();
					this.getList();
					return;
				}
				this.newlist = [];
				this.agriculture = [];
				this.setDefaultPageConfig();
				this.getList();
			},

			getList() {
				const api = this.tabIndexList === 0 ? '/down/downServiceOrder/down/list' :
					'/down/downMarketDemand/down/list';
				const data = {
					orderState: this.orderState,
					approvalState: this.approvalState,
					...this.form,
					title: this.keyword.trim(),
				};
				$H.get(api, data).then(res => {
					const list = this.tabIndexList === 0 ? this.newlist : this.agriculture;
					if (!this.approvalState && (this.approvalState === "COMPLETE" || this.approvalState ===
							"EVALUATE" ||
							this.approvalState === "DOCKING")) {
						this.form.total = res.result.total;
						this.hasMore = list.length < this.form.total;
					} else {
						list.push(...res.result.records);
						this.form.total = res.result.total;
						this.hasMore = list.length < this.form.total;
					}
					this.page++;
				}).catch(error => {
					uni.showToast({
						title: "网络错误，请稍后再试",
						icon: 'none'
					});
				});
			},

			changeTab(index, orderState, approvalState) {
				if (this.tabIndexList === 0) {
					if (this.tabIndex === index) return;
					this.tabIndex = index;
				} else {
					if (this.tabIndexs === index) return;
					this.tabIndexs = index;
				}
				this.scrollinto = "tabBar" + index;
				this.orderState = orderState;
				this.approvalState = approvalState;
				this.newlist = [];
				this.agriculture = [];
				this.setDefaultPageConfig();
				this.getList();
			},
			onChangeTab(event, tabData) {
				const detail = event.detail;
				const index = detail.current;
				const orderState = tabData[index].orderState;
				const approvalState = tabData[index].approvalState;
				this.changeTab(index, orderState, approvalState);
			},
			changeTabList(index) {
				if (this.tabIndexList === index) return;
				this.tabIndexList = index;
				this.getList();
				this.newlist = [];
				this.agriculture = [];
			},
			// 加载更多
			loadMore() {
				if (this.form.pageNo * this.form.pageSize >= this.form.total) {
					this.hasMore = false;
					return;
				}
				this.form.pageNo++;
				// 请求数据
				this.getList();
			},
			// 下拉刷新
			refresh() {
				// 重置页码为 1
				this.form.pageNo = 1;
				// 清空数据列表
				this.newlist = [];
				this.agriculture = [];
				// 设置标记为有更多数据
				this.hasMore = true;
				// 重新请求数据
				this.getList();
				// 结束下拉刷新动画
				uni.$emit('stopPullDownRefresh');
			},
			// 取消订单
			cancel(item) {
				const _this = this;
				uni.showModal({
					title: "提示",
					content: "是否取消订单？",
					success: function(res) {
						if (res.confirm) {
							$H.post(
								`/down/downServiceOrder/down/orderCancel?id=${item.id}`, {}, {
									token: true,
								}
							).then(function(res) {
								if (res.code === 200) {
									uni.showToast({
										title: res.message,
										icon: "none",
									});
									_this.getList();
								} else {
									uni.showToast({
										title: "订单取消异常",
										icon: "none",
									});
								}
							});
						} else if (res.cancel) {
							uni.showToast({
								title: "订单取消",
								icon: "none",
							});
						}
					},
				});
			},
			// 进度填写
			tags(id) {
				let o = {
					...this.code,
					id: id
				}
				$H.post('/down/downServiceOrder/down/orderSchedule', o, {}).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: res.message,
							icon: 'none',
						})
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
						})
					}
				})
			},
			addTags(id) {
				this.$refs.confirmShow.show((close) => {
					this.tags(id);
					if (this.confirmText === '') {
						return uni.showToast({
							title: "不能为空",
							icon: 'none'
						});
					}
					uni.showToast({
						title: "修改成功",
						icon: 'none'
					});
					close();
				});
			},
			//我的订单删除
			deleteMy(item) {
				const _this = this;
				uni.showModal({
					title: "提示",
					content: "是否确认删除？",
					success: function(res) {
						if (res.confirm) {
							$H.del(
								`/down/downMarketDemand/down/delete?id=${item.id}`, {}, {
									token: true,
								}
							).then((res) => {
								if (res.code === 200) {
									uni.showToast({
										title: res.message,
										icon: "none",
									});
									_this.getList();
								} else {
									uni.showToast({
										title: "删除异常",
										icon: "none",
									});
								}
							});
						} else if (res.cancel) {
							uni.showToast({
								title: "删除取消",
								icon: "none",
							});
						}
					},
				});
			},
			open(path, id) {
				uni.navigateTo({
					url: '/pages/' + path + '?id=' + id
				})
			},

		}
	};
</script>


<style lang="scss" scoped>
	.tab-scroll {
		width: 100vw;
	}

	.tab-item {
		line-height: 40px;
		display: inline-flex;
		padding: 0 24px;
	}

	.tab-items {
		width: 50%;
		display: inline-block;
		text-align: center;
		padding: 0 10px;
		line-height: 40px;
	}

	.active {
		border-bottom: 2px solid #8ED0F2;
	}
</style>